<template>
  <div id="app" class="life">
    <div class="files-title">
      <h3>睡眠时长统计</h3>
      <p>{{ searchData.stuName }} 在 {{ searchData.semesterName }} 平均睡眠时长 <span>{{sleepNum}} 分钟</span></p>
    </div>
    <line-bar ref="lineBar"  :chartData="chartData" :YAxis="YAxis" @ok="handleEmit"></line-bar>
    <div class="files-title">
      <h3>喝水次数统计</h3>
      <p>{{ searchData.stuName }} 在 {{ searchData.semesterName }} 喝水 <span>{{waterNum}} 次</span></p>
    </div>
    <line-bar ref="lineBar2"  :chartData="chartData2" :YAxis="YAxis2" @ok="handleEmit"></line-bar>
    <div class="files-title">
      <h3>如厕次数统计</h3>
      <p>{{ searchData.stuName }} 在 {{ searchData.semesterName }} 如厕 <span>{{toiletNum}} 次</span></p>
    </div>
    <line-bar ref="lineBar3"  :chartData="chartData3" :YAxis="YAxis3" @ok="handleEmit"></line-bar>
  </div>
</template>
<script>
import { StudengFiles } from '@/utils/skStudentFilesMixin.js'
import LineBar from "../modules/line-bar.vue";
export default {
  name: 'life',
  mixins:[StudengFiles],
  data() {
    return {
      url: {
        query: '/management/skStudentEvaluation/getEvaluationStatistical',
      },
     
      chartData:[
        {
          legendTitle:"班级平均睡眠时长",
          type:"line",
          color:["#FE9A8B"],
          smooth:true
        },
        {
          legendTitle:"睡眠时长",
          type:"line",
          color:["#40D5FF"],
          smooth:true
        }
      ],
      YAxis:[
        {
          name:"分钟",
          position:"left",
          smooth:true
        }
      ],
      chartData2:[
        {
          legendTitle:"班级平均喝水次数",
          type:"line",
          color:["#FE9A8B"],
          smooth:true
        },
        {
          legendTitle:"喝水次数",
          type:"line",
          color:["#40D5FF"],
          smooth:true
        }
      ],
      YAxis2:[
        {
          name:"次",
          position:"left",
        }
      ],
      chartData3:[
        {
          legendTitle:"班级平均如厕次数",
          type:"line",
          color:["#FE9A8B"],
          smooth:true
        },
        {
          legendTitle:"如厕次数",
          type:"line",
          color:["#40D5FF"],
          smooth:true
        }
      ],
      YAxis3:[
        {
          name:"次",
          position:"left"
        }
      ],
      sleepNum:0,
      waterNum:0,
      toiletNum:0,
      numList:[]
    }
  },
  components: {
    LineBar
  },
  props:["dataForm","semesterName","className"],
  filters: {},

  computed: {},

  created() {},

  activated() {},


  methods: {
    // /查看单个幼儿数据
    initStudentChart(){
      this.getSleepData();
      this.getWaterData()
      this.getToiletData()
    },
    // 睡眠
    getSleepData(){
      this.url.query = "/health/sleep/getStudentClassSleepByMonth"
      this.handleData("lineBar","avgClassDuration","avgDuration","sleepNum")
    },
    // 喝水
    getWaterData(){
      this.url.query = "/health/drink/getStudentClassDrinkByMonth"
      this.handleData("lineBar2","classAvgDrinkCount","drinkCount","waterNum")
    },
    // 如厕
    getToiletData(){
      this.url.query = "/health/toilet/getStudentClassToiletByMonth"
      this.handleData("lineBar3","classAvgToiletCount","toiletCount","toiletNum")
    },
    async handleData(ref,code1,code2,total){
      const params = {
        classId:this.searchData.classId
      }
      let data = await this.queryData(params);
      let categorys = [],xData = [];
      const monthColumns = this.dataForm.daysColums;
      let arr1 = [],arr2 = [];
      this[total] = 0
      for(let rowIndex = 0; rowIndex < monthColumns.length; rowIndex++){
        const rowString = monthColumns[rowIndex].toString();
        categorys.push(rowString);
        const monthData = data.find(item => item.month == rowString);
        if (monthData){
          arr1.push(monthData[code1])
          arr2.push(monthData[code2])
          this[total] += monthData[code2]
        } else {
          arr1.push(0)
          arr2.push(0)
        }
      }
      xData.push(arr1,arr2)
      this.$refs[ref].initEChart(categorys,xData)
    },
    handleEmit(){
      this.numList.push(true);
      if (this.numList.length == 3) {
        this.$emit("ok")
      }
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(~@/assets/less/studentFiles.css); 
</style>
